BulmaでNav barを作る
部品の構成
以下を<nav>に配置する
ブランドアイコン
ボタンその他
ボタンがこの中に表示されるようになる
詳細
本体
code:html
<nav class="navbar" role="navigation" aria-label="main navigation">
<!--いろいろ書く-->
</nav>
ブランドアイコン
code:html
<div class="navbar-brand">
<a class="navbar-item" href="...">
<!-- img タグとかを置く -->
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="global-navbar-items">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
部品の配置
この中に入れる
code:html
<div id="global-navbar-items" class="navbar-menu">
<div class="navbar-start">
<!--ここに部品を入れる-->
</div>
</div>
/icons/javascript.iconを書かないとできない。
touch deviceでもbarに部品を表示したいときは、.is-activeを入れる
manualではdiv.navbar-startを使わなくてもいいとあるが、色がおかしくなるので使ったほうが無難
ボタンその他
.navbar-itemを指定する
Navbarの固定
上に固定する
<nav>に.is-fixed-topを入れる
<html> or <body>に.has-navbar-fixed-topをいれる
下に固定する
topをbottomに変える
References